<template>
    <div class="s-form-item" :style="{width}">
        <div class="label" :style="{width:labelWidth}">{{label?`${label}：`:' '}}</div>
        <slot></slot>
    </div>
</template>
<script lang="ts">
export default {
  name: "s-form-item",
  props: {
    label: {
      type: String,
      default: ""
    },
    width: {
      type: String,
      default: "100%"
    },
    labelCol: {
      type: Number,
      default: 1
    }
  },
  setup (props: {labelCol:number, width:string}) {
    const persents = ["10%", "20%", "30%", "40%", "50%", "60%", "80%", "90%", "100%"]
    const labelWidth = persents[props.labelCol]
    return {
      labelWidth,
      ...props
    }
  }
}

</script>
<style lang="less" scoped>
  .s-form-item{
    display: flex;
    align-items: baseline;
    .label{
      text-align: right;
    }
  }
</style>
